<template>
  <el-container style="height: 100%">
    <el-header height="320px">
      <div style="margin: 10px">
        <el-select
          v-model="current_bill"
          style="width: 600px"
          placeholder="请选择"
          @change="loadTable"
        >
          <el-option
            v-for="item in all_bill"
            :key="item.groupcode"
            :label="`批次号: ${item.groupcode} 厚度: ${item.height} 材质: ${item.metal}`"
            :value="item.groupcode"
          >
          </el-option>
        </el-select>
      </div>
      <el-table :data="tableData" stripe height="280px" @current-change="loadDetails">
        <el-table-column
          v-for="column in tableColumns"
          :key="column.code"
          :prop="column.code"
          :label="column.name"
          :width="column.width ? column.width : 100"
          :formatter="
            (row, column, cellValue, index) => {
              if (column.property === 'usage') {
                return (cellValue * 100).toFixed() + '%'
              } else if (
                column.property === 'total_remainder' ||
                column.property === 'total_area' ||
                column.property === 'effective_area' ||
                column.property === 'total_over_output_area'
              ) {
                return (cellValue / 1000 / 1000).toFixed(4)
              } else if (column.property === 'total_coil_length') {
                return (cellValue / 1000).toFixed(4)
              } else {
                return cell_formatter(column, cellValue, tableColumns)
              }
            }
          "
        />
        <el-table-column width="60" label="推荐">
          <template #default="scope">
            <el-icon v-if="highligh_recommand(scope.row)" style="margin-right: 5px"
              ><Star
            /></el-icon>
          </template>
        </el-table-column>
        <el-table-column label="操作" :width="220">
          <template #default="scope">
            <el-button size="small" @click="show_coil_width_panel = true">查看候选</el-button>
            <el-button size="small" type="primary" @click="make_coils_cut_order(scope.row)">
              生成开料工单
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-header>
    <el-main>
      <el-table :data="detailTableData" stripe height="100%">
        <el-table-column
          v-for="column in cut_process_define"
          :key="column.code"
          :prop="column.code"
          :label="column.name"
          :width="column.width ? column.width : 100"
          :formatter="
            (row, column, cellValue, index) => {
              return cell_formatter(column, cellValue, cut_process_define)
            }
          "
        />
      </el-table>
      <el-dialog @opened="fillSelected" v-model="show_coil_width_panel" title="选材">
        <el-divider></el-divider>
        <el-table ref="single_table_ref" :data="current_propose?.provide_coils" style="width: 100%">
          <el-table-column type="selection" width="55" />
          <el-table-column property="barcode" label="条码号" />
          <el-table-column property="location" label="位置" />
          <el-table-column property="length" label="长度" />
          <el-table-column property="stock_in_date" label="入库日期" />
        </el-table>
        <template #footer>
          <el-button type="primary" @click="confirm_coil">确认</el-button>
        </template>
      </el-dialog>
    </el-main>
  </el-container>
</template>

<script lang="ts" setup>
import { cut_propose_define, cut_process_define } from '@/meta/index'
import type { cut_propose, cut_process } from '@/types/billdata'
import { fill_ref_info, cell_formatter, distinct } from '@/utils/common'
import { groupCutPropose } from '@/utils/groupUtils'
import { type ElTable } from 'element-plus'
import { nextTick, onMounted, ref } from 'vue'
import { cut_propose_2_coils_cut_order } from '@/utils/converter'
import { useRouter } from 'vue-router'
import { useDbStore } from '@/stores/modules/database'

const router = useRouter()
const single_table_ref = ref<InstanceType<typeof ElTable>>()
type group_metal_height = { groupcode: string; metal: string; height: number }
const all_bill = ref<group_metal_height[]>()
const current_bill = ref<string>()

const show_coil_width_panel = ref<boolean>()
const tableColumns = cut_propose_define
const all_propose = ref<cut_propose[]>()
const tableData = ref<cut_propose[]>()
const detailTableData = ref<cut_process[]>()
const current_propose = ref<cut_propose>()
const highligh_recommand = (row: cut_propose) => {
  const possibly_usage = tableData.value!.map((r) => {
    return Math.ceil(r.usage! * 100)
  })
  return Math.ceil(row.usage! * 100) === Math.max.apply(null, possibly_usage)
}
onMounted(() => {
  const cut_process: cut_process[] = useDbStore().cut_process
  all_propose.value = groupCutPropose(cut_process)
  all_bill.value = distinct(
    all_propose.value.map((r) => {
      return {
        groupcode: r.groupcode,
        metal: typeof r.metal === 'string' ? r.metal : r.metal.code,
        height: r.height
      }
    })
  )
  if (all_bill.value && all_bill.value.length > 0) {
    current_bill.value = all_bill.value[0].groupcode
    loadTable(current_bill.value!)
  }
})
const loadTable = (val: string) => {
  tableData.value = all_propose
    .value!.filter((r) => r.groupcode === current_bill.value)
    .sort((a, b) => {
      return b.usage! - a.usage!
    })
  loadDetails(tableData.value[0])
}
const loadDetails = (val: cut_propose) => {
  current_propose.value = val
  fill_ref_info(val.process, cut_process_define)
  detailTableData.value = val.process
}
const fillSelected = () => {
  nextTick(() => {
    current_propose!.value!.provide_coils.forEach((r) => {
      single_table_ref.value!.toggleRowSelection(r, current_propose!.value!.use_coil === r.barcode)
    })
  })
}
const confirm_coil = () => {
  show_coil_width_panel.value = false
}
const make_coils_cut_order = (cut_propose: cut_propose) => {
  const result = cut_propose_2_coils_cut_order(cut_propose)
  useDbStore().saveCoilsCutOrder([result])
  router.push({ path: 'coilCutOrder' })
}
</script>
<style scoped></style>
